<template>
  <view class="su-white-header" :style="{padding}">
    <slot name="top"></slot>
    <view v-if="title" class="su-white-header__title">
      {{title}}
    </view>
    <view v-if="prop" class="su-white-header__prop">
      <text v-if="propName">{{propName}}: </text>
      <text>{{prop}}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script>
  export default {
    name: "su-white-header",
    props: {
      title: {
        type: String,
        default: ''
      },
      propName: {
        type: String,
        default: ''
      },
      prop: {
        type: String,
        default: ''
      },
      padding: {
        type: String,
        default: '30upx 30upx'
      }
    }
  }
</script>

<style lang="scss">
  .su-white-header {
    background-color: #fff;
    padding: 20upx 30upx;
    font-size: 28upx;
    color: #333;
    box-shadow: 0 0 10upx rgba(0,0,0,0.05);
    &__title{
      font-size: 36upx;
      color: #000;
      font-weight: bold;
      line-height: 1.4;
    }
    &__prop{
      font-size: 24upx;
      color: #999;
      line-height: 1.4;
      margin-top: 10upx;
    }

    &::after {
      content: '';
      display: table;
    }
  }
</style>
